<template>
	<div class="col-md-8">
		<div class="card">
			<div class="card-header">
				<h4>文章列表</h4>
			</div>
			<div class="card">
				<div class="card-body">
					<div class="card-content" v-for="post in posts" :key="post.id">
						<h5 class="card-title">
							<router-link :to="{name:'posts', params:{id:post.id}}">{{post.title}}</router-link>
						</h5>

						<p class="card-text">{{post.body}}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	mounted() {
		axios.get("/api/posts").then(res => {
			this.posts = res.data.data;
		});
	},
	data() {
		return {
			posts: []
		};
	}
};
</script>

<style lang="scss" scoped>
.card-content {
	margin-top: 0;
	margin-bottom: 10px;
	h5 {
		border-bottom: 1px solid #a5a59d;
		a {
			text-decoration: none;
		}
	}
}
</style>
